<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <!--[if IE]>
<script src="js/plug/html5.js"></script>
<![endif]-->
</head>

<body>
    <div class="container demo-1">
        <div class="content">
            <div id="large-header" class="large-header">
                <div class="jq22-container" style="padding-top:30px">
                    <div class="login-wrap">
                        <div class="login-html">
                            <input id="tab-1" type="radio" name="tab" class="sign-in" checked>
                            <label for="tab-1" class="tab">登录</label>
                            <input id="tab-2" type="radio" name="tab" class="sign-up">
                            <label for="tab-2" class="tab">注册</label>
                            <div class="login-form">
                                <form class="sign-in-htm" id="user_signin">
                                    <div class="group">
                                        <label for="user" class="label">Username</label>
                                        <input id="user" type="text" class="input" required autofocus oninvalid="setCustomValidity('不能为空喔')" oninput="setCustomValidity('')">
                                    </div>
                                    <div class="group">
                                        <label for="pass" class="label">Password</label>
                                        <input id="pass" type="password" class="input" data-type="password" required oninvalid="setCustomValidity('不能为空喔')" oninput="setCustomValidity('')">
                                    </div>
                                    <div class="group">
                                        <input id="check" type="checkbox" class="check" checked>
                                        <label for="check"><span class="icon"></span> Keep me Signed in</label>
                                    </div>
                                    <div class="group">
                                        <input type="submit" class="button" value="Sign In">
                                    </div>
                                    <div class="hr"></div>
                                    <div class="foot-lnk">
                                        <a href="#forgot">Forgot Password?</a>
                                    </div>
                                </form>

                                <form class="sign-up-htm" id="user_signup">
                                    <div class="group">
                                        <label for="user" class="label">Username</label>
                                        <input id="user" type="text" class="input">
                                    </div>
                                    <div class="group">
                                        <label for="pass" class="label">Password</label>
                                        <input id="pass" type="password" class="input" data-type="password">
                                    </div>
                                    <div class="group">
                                        <label for="pass" class="label">Repeat Password</label>
                                        <input id="pass" type="password" class="input" data-type="password">
                                    </div>
                                    <div class="group">
                                        <label for="pass" class="label">Email Address</label>
                                        <input id="pass" type="text" class="input">
                                    </div>
                                    <div class="group">
                                        <input type="submit" class="button" value="Sign Up">
                                    </div>
                                    <div class="hr"></div>
                                    <div class="foot-lnk">
                                        <label for="tab-1">Already Member?</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <canvas id="demo-canvas"></canvas>
            </div>
        </div>
    </div>
    <!-- /container -->
    <script src="js/plug/TweenLite.min.js"></script>
    <script src="js/plug/EasePack.min.js"></script>
    <script src="js/plug/rAF.js"></script>
    <script src="js/plug/demo-1.js"></script>
    <script src="js/main.js"></script>
</body>

</html>
